import React, { useRef, useState } from 'react'
// import Column from './Colomn'
// import { DragDropContext, DropResult } from 'react-beautiful-dnd'
import './Estimates.scss'
// import { useAppDispatch, useAppSelector } from 'app/redux/store'
// import { loadPlaningStart } from 'app/redux/action/actionCreator'
import { useNavigate } from 'react-router-dom'
import Button from 'shared/ui/Button/Button'
import DrawBalls from './DrawBall'


const Estimates = () => {

    const navigate = useNavigate();
    const handleClick = () => {
        navigate('/');
    }

    // const  drawBalls = (ballradius: number, x:number, y:number, ballStyle: string, ctx: any) => {
    //     ctx.beginPath();
    //     ctx.arc(x, y, ballradius, 0, Math.PI*2);
    //     ctx.fillStyle = st? ballStyle : 'tomato';
    //     ctx.fill();
    //     ctx.closePath();
    // }

    // const ball2 = drawBalls;
    // const drawCircle = (
    //     ctx: CanvasRenderingContext2D,
    //     circleDims: {
    //       radius: number;
    //       lineWidth: number;
    //       strokeStyle: string;
    //       colorFill?: string;
    //       startX: number;
    //       startY: number;
    //     },
    //     // rectDims: { w: number; h: number } = { w: 400, h: 3500 }
    // ) => {
    //     const {
    //         radius,
    //         strokeStyle,
    //         startX,
    //         startY,
    //         lineWidth,
    //         colorFill
    //     } = circleDims;
    //     // ctx?.clearRect(0, 0, rectDims.w, rectDims.h);
    //     ctx.lineWidth = lineWidth;
    //     ctx.strokeStyle = strokeStyle;
      
    //     ctx?.beginPath();
    //     ctx?.arc(startX, startY, radius, 0, Math.PI * 2, true);
    //     ctx?.stroke();
    //     ctx.closePath();
    //     if (colorFill) {
    //         ctx.fillStyle = colorFill;
    //         ctx.fill();
    //     }
    // };

    
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [canvasContext, setCanvasContext] = useState<any>(null);
    // const  [dx, setDx] = useState<number>(2);
    // const  [dy, setDy] = useState<number>(-2);
    // const  [st] = useState<boolean>(false);
    // const  [dx, setDx] = useState<number>(0);
    const  [st, setST] = useState<boolean>(false);

    const ballR15 = 15;
    const ballR20 = 20;
    let x = 130;
    let y = 160;

    let dx = st? 2: 0;
    // let dx = 0;
    let dy = st? -2: 0;




    const useMousePosition = (
        // global = false
    ): [{ x: number; y: number }, (event: MouseEvent) => void] => {
        const [mouseCoords, setMouseCoords] = useState<{
          x: number;
          y: number;
        }>({
            x: 0,
            y: 0
        });
        // console.log(event?.target);
      
        const handleCursorMovement = (event: MouseEvent): void => {
            // console.log(event.target);
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            //@ts-ignore
            const rect = event.target.getBoundingClientRect();
            // console.log(event.clientX - rect.left);
            // console.log(event.clientX - rect.left, x);
            // console.log(x);
            if (coords.x <= x+15 && coords.x >= x-15 && coords.y <= y+15 && coords.y >= y-15){
                console.log('yse');
                console.log(coords.x);
                setST(true)
                console.log(st);
                
                // dy=-2
                // return dx += dx;
                // console.log(st);
                // ctx.fillStyle = 'tomato'
                // return setDx (2);
                // setDy (-2);
                // dy = -2;
                
            }

            // это условия отслеживает наведение по оси х
            // if (event.clientX - rect.left <= x+15 && event.clientX - rect.left >= x-15 
            //     && event.clientY - rect.top <= y+15 && event.clientY - rect.top >= y-15){
            //     console.log('yse');
            //     // console.log(st);
            //     console.log(dx);
            //     setST(prevState => !prevState);
            //     // ctx.fillStyle = 'tomato'
            //     // setDx (2);
            //     // setDy (-2);
            //     // dy = -2;
            
            // }
            // if( canvas) {
            //     // console.log(canvas.height-ballR15);
            //     ctx.clearRect(0, 0, canvas.width, canvas. height)

            // }
            // console.log(rect.left);
            setMouseCoords(
                // setInterval((x, y) => {
                //     x: event.clientX - rect.left,
                //     y: event.clientY - rect.top
                // }, 1000);
                {
                    x: event.clientX - rect.left,
                    y: event.clientY - rect.top
                }
            );
        };
        
        // useEffect(() => {
        //     console.log(global);
        //     if (global) {
        //         window.addEventListener('mousemove', handleCursorMovement);
        //         // window.addEventListener('mousemove', handleCursorMovement);
                
                
        //         return () => {
        //             window.removeEventListener('mousemove', handleCursorMovement);
        //         };
        //     }
            
        // // }, [global, st]);
        // }, [global]);
        // console.log(mouseCoords);
        // console.log(global);
        // if(canvas && mouseCoords.x === x+15 && mouseCoords.y === y+15) {
        // if(canvas) {


        

        //     // ball(ctx, 20, 2, 150, 60);
        //     // ctx.fillStyle='tomato';
        //     // ctx?.strokeRect(200, 200, 40, 50);
        //     // canvas.width =windowWidth;
        //     // canvas.height =windowHeight;
        //     // const context = canvas.getContext('2d');
        //     // setCanvasContext(ctx);
        //     // requestAnimationFrame(ctx, 20, 2, coords.y, coords.x)
        //     // ctx.clearRect(0, 0, canvas.width, canvas.height);
        //     // requestAnimationFrame(ctx)
        //     // requestAnimationFrame(ctx)
        //     // ctx.setTransform(1, 0, 0, 1, 0, 0);
        //     // ctx.translate(110, 30)
        //     // ctx.clearRect(0,0, 30,30)
        //     // ctx.fillStyle = 'red';
        //     // ctx.fillRect(160, 150, 30, 30);
        //     // setInterval(()=>{dr},20)
        //     // ctx.fillRect(coords.x++, coords.y++, x, y);
        //     // console.log(dr);
        //     // dr();
        //     // setInterval(dr,10)
        //     // requestIdleCallback(dr)
        //     // requestAnimationFrame(dr)
        //     // console.log(dr().getBoundingClientRect());
        //     dr();
        //     // ball2(ctx, 26, 20, 20, 20);
        //     // ctx.fillRect(coords.x++, coords.y++, x, y);
        //     // ctx.closePath();
        //     // ctx.fillRect(30, 30, canvas.width, canvas.height);
            
        //     // testBall(ctx, 350, 150);
        //     // ctx.fillStyle = 'white';
        //     // ctx.fillRect(250, 120, 70, 70);
        //     // testBall(ctx, 150, 150);
        //     // testBall(ctx, 105+1, 150+1);
        //     // ctx.fillStyle = '#4F3CAC';
        //     // ctx.font = '200px Tahoma';
        //     // ctx.fillText('7', 400, 300);
        //     // ctx.rotate((45 * Math.PI) / 180);
            
            
    
        //     // setInterval(()=> {testBall(ctx, coords.x++, coords.y++)
        //     // }
        //     // ,20)
            
        //     // setInterval(draws, 10)
        //     // requestAnimationFrame(ctx, 20, 2, 50, 60)
        //     // requestAnimationFrame(ctx, 20, 2, 150, 160)
        //     // requestAnimationFrame(ctx, 10, 2)
        // }
        // console.log(mouseCoords);
        
      
        return [mouseCoords, handleCursorMovement];
    };

    const [coords, handleCoords] = useMousePosition();

    // let dy = -2;
    // console.log(canvas?.width);
    // console.log(canvas);
    // if(canvas) {
    //     ctx.clearRect(0, 0, canvas.width, canvas. height)
    //     drawBalls(ballR15, x, y, '#4F7CAC', ctx);
        
    // }
    // if(canvas) {

    //     ctx.beginPath();
    //     // console.log(x,y);
        
    //     ctx.arc(x+25, y+25, 15, 0, Math.PI*2);
    //     ctx.fillStyle = 'green';
    //     ctx.fill();
    //     ctx.closePath();
    // }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    // const windowWidth = window.innerWidth;
    // const windowHeight = window.innerHeight;
    // if( canvas) {
    //     // ctx.clearRect(0, 0, canvas.width, canvas. height)
    //     drawBalls(ballR15, x, y, '#4F7CAC', ctx);
    // }
    const ballsList = (ctx:CanvasRenderingContext2D, x: number, y: number)   => [
        DrawBalls(ballR15, x, y, '#4F7CAC', ctx),
        DrawBalls(ballR15, x=220, x=320, 'green', ctx)
        
    ]
    const canvasRef = useRef<HTMLCanvasElement|null>(null);
    const  drawAnimations = () => {
        
        // let dx = st? 2: 0;
        // let dx = 0;
        // let dy = st? -2: 0;
        // let dx = 0;
        // let dy = 0;
        const canvas: HTMLCanvasElement | null = canvasRef.current;
        const ctx = canvas?.getContext('2d');
        
        // console.log(canvas);
        if(canvas && ctx) {
            ctx.clearRect(0, 0, canvas.width, canvas. height);
            //  canvas
            //  .getBoundingClientRect();
            // console.log(rect);
            ballsList(ctx, x, y).forEach(e => {
                // console.log(event.target);
                
                return e
            })
            
            // const circle = new Path2D();
            // circle.arc(x+15, y+15, 30, 0, 2 * Math.PI);
            // ctx.fillStyle = 'red';
            // ctx.fill(circle);
            // ctx.beginPath();
            // DrawBalls(ballR15, x=30, y=30, '#4F7CAC', ctx);
            // ctx.stroke();
            // ctx.closePath();
            // ctx.beginPath();
            // ctx.arc(520, 250, 10, 0, Math.PI * 2);
            // ctx.fillStyle='green';
            // ctx.fill()
            // ctx.stroke();
            // ctx.closePath();
            // ctx.fillRect(250, 120, 70, 70);
            // ctx.fillRect(350, 120, 70, 70);
            // ctx.fillRect(450, 120, 70, 70);
            // ctx.fillRect(550, 120, 70, 70);
            ctx.beginPath();
            ctx.arc(320, 250, 20, 0, Math.PI * 2);
            ctx.fillStyle='tomato';
            ctx.fill()
            ctx.stroke();
            ctx.closePath();
            // ctx.fillRect(550, 250, 70, 70);
            // ctx.beginPath();
            // DrawBalls(ballR15, x+50, y, '#4F7CAC', ctx);
            // ctx.closePath();
            // drawBalls(ballR15, x, y, '#4F7CAC', ctx);
            // DrawBalls(ballR15, x, y, '#4F7CAC', ctx);
            
            // ball2(ballR20, y, x, 'grey', ctx);
            // drawBalls(ballR15, x=40, y=40, '#4F7CAC', ctx);
            // drawBalls();
            // drawBalls(ballR15, x, y, '#4F7CAC', ctx);
            // console.log(event.target.getBoundingClientRect());
            // console.log(coords.y);
            // console.log(x, y);
            
            // console.log(coords.x);
            // drawBalls(ballR20 , x, y, ctx);
            // console.log(drawBalls);
            
            // ball(ctx, ballR20, 2, x, y);

            // eslint-disable-next-line max-len
            if(x + dx > canvas.width-ballR15 && x + dx > canvas.width-ballR20 || x + dx < ballR15 && x + dx < ballR20) {
                dx = -dx-25;
                // dy = -dy+25;
                // dx = dx-1.2
                // dy = dx-1.2
                console.log(dx);
                
                // setDx(-dx)
            }
            // eslint-disable-next-line max-len
            if(y + dy > canvas.height-ballR15 && y + dy > canvas.height-ballR20 || y + dy < ballR15 && y + dy < ballR20) {
                // setDy(-dy)
                // dx = -dx-25;
                dy = -dy+25;
                // dx = dx-1.2
                // dy = dx-1.2
            }
            // console.log(coo);
            
            
            // if(coords.x <= x || coords.y <= y) {
            // console.log(coords.x);
            // console.log(coords.y);
            // console.log('ff');
            // console.log(dx);
            x += dx;
            y += dy;


            // }
            
        // }
        }

        window.requestAnimationFrame(drawAnimations);
        
    }
    drawAnimations();



    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    
    // console.log(coords);
    // useEffect(()=>{
    //     console.log(dx);
    
    // },[dx])
    // useEffect(()=>{
        
    //     // if(canvas) {
    //     //     ball2(ballR15, x+140, y+140, 'red', ctx);
    //     //     // ctx.clearRect(0, 0, canvas.width, canvas. height)
    //     //     //     drawBalls(ballR15, 30, 60, '#4F7CAC', ctx);
    
    //     // }

    // },[drawAnimations])
    // if(canvas){
    // console.log('true');
    // console.log(canvasRef);
        
    // }
    // useEffect(() =>{


    // },[st])
    
    return (
        <div className="">

            {/* <DragDropContext onDragEnd={onDragEnd}>
                    <div className='StyledColumns'>
                        {Object.values(columns).map((col: any) => (
                            <Column col={col} key={col.id} />
                        ))}
                    </div>
                </DragDropContext> */}
            <Button onClick={handleClick} children='back' className='btn btn-back'/>
            <canvas 
                ref={canvasRef}
                id="canvas2"
                width="800"
                height="450"
                onMouseMove={(e:any) => {
                // onMouseMove={(e) => {
                    // console.log('e');
                    
                    handleCoords((e as unknown) as MouseEvent);
                    // handleCursorMovement(e)
                }}
                style={{
                    border: '2px solid black',
                    display: 'flex',
                    margin: 'auto',
                    marginTop: '200px',
                    cursor: 'pointer'
                    
                }}
                // onClick={()=>{
                    
                // canvasContext.fillStyle = 'tomato';
                // eslint-disable-next-line max-len
                // canvasContext.fillRect(0, 0, canvasContext.canvas.width, canvasContext.canvas.height);
                // }}
            ></canvas>
        </div>
    )
}
//     return <div className="">...loaded</div>
// }
 
export default Estimates;